<template>
  <div class="content">
    <navBar :navBar="navBar" :callback="godetail"></navBar>
    <div class="contentInner" v-if="false">
      <!-- <div class="emptyBox"></div> -->
      <div class="tishi">{{ $t("温馨提示：提现受交易量限制") }}</div>

      <div class="boxs">
		  
        <div
          class="onebox"
          v-for="(item, index) in list"
          :key="index"
          @click="go(item.EN_name, item)"
		  v-if="item.EN_name == 'USDT' || item.EN_name == 'CNY'"
        >
          <div class="boxname">
            <img
              src="../../assets/images/zichan/usdt.png"
              alt=""
              class="logo"
              v-if="item.EN_name == 'USDT'"
            />
			<img
			  src="../../assets/images/zichan/yhk.png"
			  alt=""
			  class="logo"
			  v-if="item.EN_name == 'CNY'"
			/>
			<svg v-if="item.EN_name == 'RMB'" t="1659668175967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2195" width="32" height="32">
				<path d="M512 96c229.76 0 416 186.24 416 416S741.76 928 512 928 96 741.76 96 512 282.24 96 512 96z m0 64C317.589333 160 160 317.589333 160 512S317.589333 864 512 864 864 706.410667 864 512 706.410667 160 512 160z m105.386667 117.034667l45.226666 45.248-136.661333 136.682666H682.666667v64h-138.666667v81.941334H682.666667v64h-138.666667v100.8h-64v-100.8H341.333333v-64h138.666667v-81.941334H341.333333v-64h156.714667l-136.682667-136.682666 45.269334-45.226667L512 382.4l105.386667-105.386667z" fill="#1677FF" p-id="2196">
				</path>
			</svg>
            <span v-if="item.EN_name == 'CNY'">{{ $t('银行卡') }}{{ $t("提现") }}</span>
            <span v-else>{{ item.EN_name }}{{ $t("提现") }}</span>
          </div>
          <div class="buy">{{ $t("提现") }}></div>
        </div>
      </div>
    </div>
	
	<div class="top">
		<div class="one">
			<div class="one1">当前余额（元)</div>
			<div class="one2">￥<span>{{zichanlist.total}}</span></div>
			<div class="one2">折合USDT {{zh()}}</div>
		</div>
		<div class="two">
			<div class="two1">提现金额</div>
			<div class="two2">
				<span>￥</span>
				<input v-model="jine" type="text" placeholder="请输入提现金额" @input="jisuan()">
				<div>手续费</div>
				<div>{{info.tibi_fee}}</div>
			</div>
			<div class="two3">单次提现金额最低<span>100元</span></div>
			<div class="two1">汇率:{{ config.usdt_huilv }}</div>
			<div class="two3">折合<span>{{ sj() }}</span></div>
		</div>
		<div class="three">
			<div :class="type == 1 ? 'xuanzhong':''" @click="type = 1">银行卡</div>
			<div :class="type == 2 ? 'xuanzhong':''" @click="type = 2">USDT</div>
		</div>
		<div class="four">
			<div class="item" v-if="type == 1">
				<div class="left">银行卡号：</div>
				<div class="right" v-if="banklist.addr">
					<span>{{banklist.name}}</span>
					{{banklist.addr.substring(0,5)}} **** {{banklist.addr.substr(-5)}}
				</div>
			</div>
			<div class="item" v-if="type == 2">
				<div class="left">收款地址：</div>
				<div class="right" v-if="usdtlist.addr">{{usdtlist.addr.substring(0,5)}} **** {{usdtlist.addr.substr(-5)}}</div>
			</div>
			<!-- <div class="item" v-if="type == 2">
				<div class="left">折合USDT：</div>
				<div class="right">{{usdt}} USDT</div>
			</div> -->
			<div class="item">
				<div class="left">取款密码：</div>
				<input type="password" v-model="paypsd" placeholder="请输入提现密码">
			</div>
		</div>
		<div class="btns" @click="sub()">确认提交</div>
	</div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("提现"),
        close: false,
        btn: this.$t("提现明细"),
      },
      list: [],
	  
	  type:1,
	  jine:'',
	  usdt:0,
	  info:[],
	  zichanlist:[],
	  usdtlist:[],
	  banklist: [],
	  paypsd:'',
	  config:{}
    };
  },


  mounted() {
    // this.getlist();
	this.getconfig();
	this.getinfo()
	this.getzichanlist()
	this.getUsdtList()
	this.getRMBList()
  },

  methods: {
	sj(){
		let sxf=this.jine*(this.info.tibi_fee);
	
		if(this.type==2){
			let sxf=(this.jine/this.config.usdt_huilv)*(this.info.tibi_fee);
			if(this.jine){
			
				return ((this.jine/this.config.usdt_huilv)-sxf).toFixed(2)
				
				
			}else{
				return 0;
			}
	
		}else{
			if(this.jine){
				return (parseFloat(this.jine)-sxf).toFixed(2)
			}else{
				return '';
			}
			// return (this.jine-sxf).toFixed(2)
		}
		
	},
	zh(){
		let str = this.zichanlist.total;
		if(str){
			if (str.indexOf(",") !== -1) {
			console.log("字符串包含逗号");
			return (parseFloat(this.zichanlist.total.replace(',','')) / Number(this.config.usdt_huilv)).toFixed(2)
			} else {
			console.log("字符串不包含逗号");
			return (Number(this.zichanlist)/ Number(this.config.usdt_huilv)).toFixed(2)
			}
		}
		
	},
	getconfig(){
		$postAxios(api.getService, {}, (res) => {
	    this.config = res.data;	
		this.kefu_url = res.data.kefu_url;
		
	  });
	},
	getinfo(){
	  $postAxios(api.getUserInfo, {}, res => {
		if (res.code == 0) {
			this.info = res.data;
		} else {
			this.$toast(this.$t(res.msg));
		}
	  });
	},
	getzichanlist(){
	  $postAxios(api.getAssets, {}, (res) => {
		this.zichanlist = res;
	  });
	},
	//获取钱包地址列表
	getUsdtList() {
	  $postAxios(api.getWalletAddr, { type: "USDT" }, (res) => {
	    console.log(res);
	    if (res.code == 0&&res.data[0]) {
	      this.usdtlist = res.data[0];
	    }
	  });
	},
	getRMBList() {
	  $postAxios(api.getWalletAddr, { type: "Bank" }, (res) => {
	    console.log(res);
	    if (res.code == 0&&res.data[0]) {
	      this.banklist = res.data[0]
	    }
	  });
	},
	jisuan(){
		this.usdt = (Number(this.jine) / Number(this.info.U_money)).toFixed(2)
	},
	sub(){
	  if (this.jine == '') {
		this.$toast(this.$t("请输入提现金额"));
		return false;
	  }
	  if (this.paypsd == '') {
	  		this.$toast(this.$t("请输入提现密码"));
	  		return false;
	  }
	  var that = this;
	  this.$toast.loading({
			duration: 0,
			message: "",
			forbidClick: true,
	  });
	  let address = ''
	  if(this.type == 1){
		  address = that.banklist.addr
	  }else if(this.type == 2){
		  address = that.usdtlist.addr
	  }
	  $postAxios(api.withdrawal, {
		  amount:that.jine,
		  pay_pwd:that.paypsd,
		  type:that.type,
		  qianbao_addr:address
	  }, (res) => {
		that.$toast.clear();
		var str = res.msg.indexOf('-') > 0 ? this.$t(res.msg.split('-')[0])+res.msg.split('-')[1] : this.$t(res.msg);
		this.$toast(str);
		if (res.code == 0) {
			that.jine = "";
			that.paypsd = "";
		  setTimeout(() => {
			that.$router.push({
				name: "withdrawalDetails",
			});
		  }, 1000);
		}
	  });
	},
	  
	  
    onClickLeft() {
      this.$router.go(-1);
    },
    godetail() {
      this.$router.push({
        name: "withdrawalDetails",
      });
    },
    go(type, info) {
		
      var info = JSON.stringify(info);
	  
      this.$router.push({
        name: "withdrawal-open",
        query: {
          type: type,
          info: info,
        },
      });
    },
    //获取可提现币种和手续费
    getlist() {
      $postAxios(api.getWithdrawalFee, {}, (res) => {
        this.list = res.data;
		console.log(this.list)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
	.navBar{
		background-color: transparent !important;
	}
.content {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: #21212b;
  .contentInner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .emptyBox {
    width: 100%;
    height: 40px;
  }
  .tishi {
    padding: 23px 10px;
    font-size: 12px;
    color: #333333;
    font-weight: bold;
  }
  .title {
    text-align: center;
    padding: 17px 0 0;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
  }
  .boxs {
    width: 95%;
    margin: 15px auto 0;
    display: flex;
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 30px;
    .onebox {
      width: 47%;
      margin-bottom: 10px;
      background: #ffffff;
      border-radius: 15px;
      box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);
      .boxname {
        display: flex;
        align-items: center;
        padding: 14px 10px 14px;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        border-bottom: 0.5px solid #f1f3f4;
        .logo {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
        .nameimg {
          width: 100%;
          height: 30px;
        }
      }
      .buy {
        padding: 8px 14px 10px 0;
        text-align: right;
        font-size: 12px;
        color: #1c9fff;
      }
    }
  }
}

.top{
	width: 100%;
	height: 494px;
	display: flex;
	flex-direction: column;
	background: url('../../assets/img/dealBKG.png') no-repeat 50% -100px/745px;
	padding-top: 44px;
	box-sizing: border-box;
}
.one{
	text-align: center;
	color: #fff;
	margin: 31px 0 52px;
	
	.one1{
		font-size: 16px;
		font-weight: 500;
	}
	.one2{
		height: 39px;
		line-height: 50px;
		font-size: 14px;
		font-weight: 700;
		
		span{
			font-size: 29px;
			font-weight: 700;
		}
	}
}
.two{
	margin: 0 20px 41px;
	padding: 16px 11px;
	box-sizing: border-box;
	background: #262732;
	color: #fff;
	box-shadow: 0 7px 10px 1px #262732;
	border-radius: 5px;
	
	.two1{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.two2{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		font-size: 12px;
		
		div{
			font-size: 14px;
		}
		
		input{
			background-color: transparent;
			border: none;
			font-size: 14px;
		}
		span{
			font-size: 24px;
			margin-right: 10px;
		}
	}
	.two3{
		margin-top: 20px;
		font-size: 13px;
		font-weight: 400;
		color: #999;
		
		span{
			color: #edd33a;
		}
	}
}
.three{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #fff;
	
	div{
		font-size: 15px;
		margin-right: 40px;
		border-bottom: 2px solid transparent;
	}
	div:last-child{
		margin-right: 0;
		margin-left: 40px;
	}
	div.xuanzhong{
		border-bottom: 2px solid #edd33a;
		font-weight: 500;
	}
}
.four{
	margin-top: 20px;
	text-align: left;
	color: #fff;
	font-size: 14px;
	
	.item{
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		
		div{
			margin: auto 10px;
		}
		
		input{
			background-color: transparent;
			border: none;
			font-size: 14px;
			margin: auto 10px;
			text-align: right;
		}
	}
}
.btns{
	margin: 0 15px;
	color: rgb(0, 0, 0);
	background-color: rgb(237, 211, 58);
	font-size: 16px;
	text-align: center;
	border-radius: 3px;
	height: 40px;
	line-height: 40px;
	box-sizing: border-box;
	margin-top: 15px;
}
</style>